<template>
  <view class="u-wrap">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<f-navbar :title="title" :bgColor="PrimaryColor" fontColor="#fff"></f-navbar>
		<view class="sellcenter u-flex u-flex-middle" :style="'background:'+PrimaryColor">
		
                <u-row customStyle="paddingTop:30px;color:#ffffff;" class="dddd" justify="center" align="center">
                    <u-col span="12" align="center">
                        <view class="text-center">{{$t('balance')}}</view>
						<view class="text-center"> {{coininfo.symbol}}&nbsp;{{ (coininfo.balance_available * 1).toFixed(2) }}</view>
                    </u-col>
                </u-row>
		
		</view>

		<view class="u-p-l-20 u-p-r-20">
			
		<u-button type="error" v-if="coininfo.id==61" @click="$tools.goJump('/pages/componentsA/durg/taginfo',{query:JSON.stringify({categoryid:'',tagtypeid:'',name:'',playad:1})},'','')">看广告视频、签到打卡</u-button> 
        <view class="u-m-t-20">
        <u-empty :text="coininfo.id==61?'点击看广告视频,看完即可奖励积分哦.':'暂无交易记录'" mode="data" icon="https://i.yodin.com/storage/empty/data.png" :show="flow_list.length===0" class="u-m-t-90"></u-empty>
		  
        <view class="base-panel-box  u-m-b-20" v-for="(item, index) in flow_list" :key="index">
          <view class="item yuan u-flex" v-if="currentTab == 0 || currentTab == 1">
			<view class="u-flex-6">{{item.add_time}}
				
			</view>
			<view>{{$t('currbalance')}}:<span  class="font-weight-bold price">{{(item.surplus*1).toFixed(2)}} </span></view>

        </view>
		  
        <view class="item yuan" v-if="currentTab == 2">
				<view class="money">
				  {{ (item.coin * 1).toFixed(2)}}
				  {{ coininfo.unit }}
				</view>
        </view>

          <view class="item yuan" v-if="currentTab == 3">
            <u-row gutter="0" justify="space-between">
              <u-col span="6">
                <view class="source" :style="{color: item.status == 1 ? '#4caf50' : item.status == 2 ? '#ff1e0f' : '#00b7ff',}">
                  {{item.status == 1 ? "通过": item.status == 2 ? "无效" : "处理中"}}
                </view>
              </u-col>
			  <u-col span="6" text-align="right">
				<view class="money" v-if="currentTab != 2" :class="item.opera == '+' ? 'jia' : 'shao'">
				  {{ currentTab == 2 ? item.coin : (item.coin * 1).toFixed(2) }}
				  {{ coininfo.unit }}
				</view>
			  </u-col>
            </u-row>
          </view>
		  <view class="item" v-if="currentTab == 3">
			  <view class="source">USDT Account：{{ item.towalletaccount }}</view>
		  </view>

		  
		  <view class="item">
			<view>
				<u--text :text="item.behaviorname +'  '+ (item.coin * 1).toFixed(2)+coininfo.unit" align="left" :type="item.opera == '+' ? 'success' : 'error'"></u--text>
			</view>
			<view class="u-flex-self-start">{{ item.remark }}</view>
				
		  </view>
        </view>

		  
		<u-loadmore  v-if="flow_list.length > 0" nomoreText="End" color="#dddddd" marginBottom="50" marginTop="50" :status="loadStatus" @loadmore="getflowlist" line></u-loadmore>
		<u-gap height="10"></u-gap>
        </view>
		</view>
        <!-- <view class="tip">仅显示近半年内的收支记录</view> -->
      
    
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_assets_list,api_assets_coinflow } from '@/config/api.js';
import fNavbar from '@/components/module/f-navbar/f-navbar';
export default {
    components:{
        fNavbar
    },
  data() {
    return {
      selectList: [],
      flow_list: [],
      coininfo: {
		  balance_available:''
	  },
      loadStatus: "loadmore",
      page: 1,
      coinid: 0,
      coinname: "",
      date: "incomeMonth",
      currentTab: 0,
      tabs: [
        {
          name: "全部",
        },
        {
          name: "充值",
        },
        //{ name: "冻结",},
        {
          name: "提现",
        },
      ],

      behaviorclass: "",
	  title:''
    };
  },
	computed:{
	    ...mapState(['PrimaryColor','userInfo']),
	},
  onLoad(option) {
   
    this.coinid = option.id;
    api_assets_list({
      coinid: this.coinid,
    }).then((res) => {
		console.log(res)
          this.coininfo = res.currentcoininfo;
		  uni.setNavigationBarTitle({title: this.coininfo.name});
		  this.title=this.coininfo.name
    }).catch((e) => {});

    let flag = this.getflowlist();
  },
  onReachBottom() {
	if (this.loadStatus=="loadmore"){
		setTimeout(() => {
		  if (this.loadStatus=='loadmore')this.getflowlist();
		}, 50);
	}
  },
  onPullDownRefresh() {
	if(this.currentTab==0){
		this.flow_list = [];
		this.page = 1;
		this.getflowlist();
	}else if (this.currentTab == 2) {
		//解冻记录
		this.freezelog();
      }else if (this.currentTab == 3) {
		// 提币记录
		this.gettibilog();
      }
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    changeTab(e) {
      this.currentTab = e.index;
      this.flow_list = [];
      this.page = 1;
      this.date = "";
      if (this.currentTab == 3) {
        this.gettibilog();
      } else if (this.currentTab == 0) {
        this.behaviorclass = "";
		this.getflowlist();
      } else if (this.currentTab == 1) {
        this.behaviorclass = "1";
        this.date = "incomeYesterday";
		this.getflowlist();
        //this.date = "incomeMonch";
      } else if (this.currentTab == 2) {
		//解冻记录
		this.freezelog();
      }
    },
    freezelog() {
      this.loadstatus = true;
      return new Promise((resolve, reject) => {
        this.$api("assets.freeze_log", {
          page: this.page,
          limit: 10,
          coinclass: this.coinid,}).then((res) => {
            console.log(res);
            if (res.code == 200) {
              if (res.data.count > 0) {
                let list = res.data.list;
                if (this.page <= res.data.pages) {
                  for (let i = 0; i < list.length; i++) {
                    this.flow_list.push(list[i]);
                  }
                  if (this.page == res.data.pages) {
                    this.loadStatus = "nomore";
                  }
                  this.page += 1;
                } else {
                  this.loadStatus = "nomore";
                }
              } else {
                this.flow_list = [];
                this.loadStatus = "nomore";
              }
            }
			this.loadstatus = false;
          }).catch((e) => {
            this.loadstatus = false;
            resolve(false);
          });
      });
    },
    gettibilog() {
      this.loadstatus = true;
      return new Promise((resolve, reject) => {
        this.$api("assets.ti_bi_log", {
          page: this.page,
          limit: 10,
          coinclass: this.coinid,}).then((res) => {
            console.log(res);
            if (res.code == 200) {
              if (res.data.count > 0) {
                let list = res.data.list;
                if (this.page <= res.data.pages) {
                  for (let i = 0; i < list.length; i++) {
                    this.flow_list.push(list[i]);
                  }
                  if (this.page == res.data.pages) {
                    this.loadStatus = "nomore";
                  }
                  this.page += 1;
                } else {
                  this.loadStatus = "nomore";
                }
              } else {
                this.flow_list = [];
                this.loadStatus = "nomore";
              }
            }
			this.loadstatus = false;
          }).catch((e) => {
            this.loadstatus = false;
            resolve(false);
          });
      });
    },

    getflowlist() {
      this.loadstatus = true;

        api_assets_coinflow({
          page: this.page,
          limit: 10,
          coinclass: this.coinid,
          date: this.date,
          behaviorclass: this.behaviorclass,
        }).then((res) => {
            this.loadstatus = false;
            if (res.count > 0) {
                if (this.page <= res.pages) {
					res.list.map((item) => {
						this.flow_list.push(item);
					})
					if (this.page==res.pages)this.loadStatus = "nomore";
                  this.page += 1;
                } else {
                  this.loadStatus = "nomore";
                }
            }
          }).catch((e) => {});

    },
  },
};
</script>

<style lang="scss" scoped>


.flexView {
    .head-read {
      background: linear-gradient(to bottom, #63E5CB, #52D3FF);
      padding-bottom: 50rpx;
      .flex {
        padding: 30rpx;
        .flex-box {
          flex: 1;
          min-width: 0;
          font-size: 26rpx;
          color: #333;
          &-text {
            margin: 10rpx 0;
            color: #f5f5f5;
            font-weight: normal;
          }
        }
      }
    }
    .white-box {
      width: 94%;
      background: #FAFAFF;
      border-radius: 24rpx;
	  padding-top: 35rpx;
      margin: -60rpx auto 20rpx;
      box-shadow: 0 6rpx 10rpx #EEEEEE;
	  height: 160rpx;

      .palace {
		padding-top: 10rpx;
        &-grid {
          flex: 1;
          position: relative;
          box-sizing: border-box;
          &:not(:last-child) {
            &:after {
              width: 1rpx;
              height: 80rpx;
              background: #e9e9e9;
              content: " ";
              display: inline-block;
              position: absolute;
              top: 0;
              right: 0;
            }
          }
          &-text {
            text-align: center;
            &-name {
              font-size: 26rpx;
              font-weight: normal;
              color: #757575;
            }
            &-data {
              font-size: 32rpx;
              color: #000;
              letter-spacing: 2rpx;
              margin-bottom: 5rpx;
              &-b {
                font-size: 36rpx;
              }
            }
          }
        }
      }
    }
  
}
.tx-btn {
  border-radius: 40rpx;
  font-size: 26rpx;
  padding: 16rpx 44rpx;
  background: linear-gradient(to right, #fef082, #ffc551);
  background-color: #fef082;
  color: #cf4400;
  margin-left: 30rpx;
}


.source {
  margin: 12rpx 0;
}
.time {
  color: #888;
}

.money {
  display: inline-block;
  font-size: 30rpx;
  font-weight: 500;
  color: #fe5c47;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  &.jia {
    color: #18b566;
  }
  &.shao {
    color: red;
  }
}

.base-panel-box{
	border: none;
	.item{
		background: #FAFAFF;
	}
}
	.sellcenter{
		position: relative;
		margin-bottom: 15px;
		padding-bottom: 30px;
		height: 100px;
		background: #1C9C63;


		}
</style>
